import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ElMessageBox } from "element-plus";
export default defineComponent({
	setup() {
		return () => {
			const proTable = ref<any>();
			const columns: ColumnProps[] = [
				{ type: "selection", fixed: "left", width: "auto" },
				{ prop: "category", label: "通知主题", search: { el: "input" } },
				{ prop: "type", label: "通知类型" },
				{ prop: "timestamp", label: "通知时间" },
				{ prop: "content", label: "通知内容" },
				{ prop: "status", label: "状态" },
				{ prop: "descript", label: "描述" }
			];
			const buttonsList = ref<any>([
				/* { title: "标记已读", icon: "iconbx-show-alt" } */
			]);
			const dataCallback = (data: any) => {
				return {
					datalist: data.records,
					total: data.total || 0,
					pageIndex: data.current,
					pageSize: data.size
				};
			};
			const getTableList = async () => {
				// return getGatewayList(params);
				return { result: { records: [{}] } };
			};
			const handerBtn = (fn: string, row: any) => {
				ElMessageBox.alert("处理按钮点击,fn=" + fn + ", data=" + JSON.stringify(row, null, 2));
				proTable.value.getTableList();
			};
			return (
				<div class="hist-alarm-page ">
					<ProTable
						title={buttonsList.value.length ? "" : "通知中心"}
						columns={columns}
						requestApi={getTableList}
						dataCallback={dataCallback}
					>
						{{
							tableHeader: (scope: any) => {
								return buttonsList.value?.map((item: any) => {
									return (
										<el-button class={`iconfont ${item.icon}`} onClick={() => handerBtn(item.path, scope)} type={item.btn_class}>
											{item.title}
										</el-button>
									);
								});
							},
							duration: (scope: any) => {
								return (
									<span class="text-red-500">
										{scope.duration || 0}
										<span>秒</span>
									</span>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
